<template>
  <el-drawer class="custom-drawer" v-model="visible" :size="size" v-bind="$attrs" :show-close="false" @close="handleClose">
    <template #header>
      <div class="flex items-center justify-between custom-header">
        <div class="flex items-center custom-header__title">
          <el-icon v-if="icon" :size="20" color="var(--el-color-primary)" class="mr-2">
            <component :is="icon" />
          </el-icon>
          <span>{{ title }}</span>
        </div>
        <div class="header-buttons">
          <slot name="buttons">
            <el-button :loading="loading" @click="handleClose">取消</el-button>
            <el-button v-if="showSubmit" type="primary" :loading="loading" @click="handleConfirm">确认</el-button>
          </slot>
        </div>
      </div>
    </template>
    <slot></slot>
  </el-drawer>
</template>

<script setup lang="ts">
defineOptions({
  name: "CustomDrawer"
});

interface Props {
  modelValue: boolean;
  title?: string;
  icon?: string;
  size?: string | number;
  loading?: boolean;
  showSubmit?: boolean;
}

// 继承 ElDrawer 的所有属性
const $attrs = useAttrs();

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  title: "",
  icon: "",
  size: "50%",
  loading: false,
  showSubmit: true
});

// 透传所有事件
const emit = defineEmits(["update:modelValue", "close", "confirm", "open", "opened", "close", "closed"]);

const visible = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val)
});

// 关闭抽屉
const handleClose = () => {
  visible.value = false;
  emit("close");
};

// 确认按钮
const handleConfirm = () => {
  emit("confirm");
};
</script>

<style lang="scss" scoped>
.custom-drawer {
  .custom-header__title {
    span {
      color: #72767b !important;
    }
  }
  .header-buttons {
    :deep(.el-button span) {
      font-size: 14px !important;
    }
    :deep(.el-button--primary span) {
      color: #ffffff !important;
    }
  }
}
</style>
